In this step of the tutorial you create scripts which run the application in this tutorial in the demo mode. The scripts move the gauge needles, switch cluster indicators on and off, and get the current time from the device running the application.
The starting point of this tutorial is the Demo.kzproj Kanzi Studio project file stored in the <KanziWorkspace>/Tutorials/Demo/Assets directory.
The <KanziWorkspace>/Tutorials/Demo/Completed directory contains the completed project of this tutorial.
In the starting point project of this tutorial FuelNeedle, BatteryNeedle, and SpeedNeedle nodes each contain a binding which binds the Rotation Z property field of these nodes to the Speed, Battery, and Fuel properties in these nodes. For example, in the SpeedNeedle node when you change the value of the Speed property, the SpeedNeedle node rotates.
In this section of the tutorial you use the On Timer trigger to execute a JavaScript script which modifies the values of the Speed, Battery, and Fuel properties in the SpeedNeedle, BatteryNeedle, and FuelNeedle to change the position of the needles.
To move the speed, fuel, and battery needles:
If you cannot see all three gauges in the Preview, you can adjust the Preview zoom level in the upper right corner of the Preview.
// Get the SpeedNeedle node. var speedNeedleNode = node.lookupNode('#SpeedNeedle'); // Set the highest value for the speed needle. var maxSpeed = 240; // Set the number of seconds it takes for the needle to go from the lowes to the highest value and back var cycleTimeSpeed = 10; var timeOffsetSpeed = 0; var fuelNeedleNode = node.lookupNode('#FuelNeedle'); var maxFuel = 100; var cycleTimeFuel = 10; var timeOffsetFuel = 3; var batteryNeedleNode = node.lookupNode('#BatteryNeedle'); var maxBattery = 100; var cycleTimeBattery = 10; var timeOffsetBattery = 0; function calculateNeedlePosition (maxValue, cycleTime, timeOffset) { var halfCycleTime = cycleTime / 2; var now = (Date.now() + timeOffset * 1000) / 1000; var needleValue = 0; var percentOfHalfCycle = (now % halfCycleTime) / halfCycleTime; if (now % cycleTime < halfCycleTime) { needleValue = maxValue * percentOfHalfCycle; } else { needleValue = maxValue - maxValue * percentOfHalfCycle; } return needleValue; } speedNeedleNode.setProperty('Demo.Speed', calculateNeedlePosition(maxSpeed, cycleTimeSpeed, timeOffsetSpeed)); fuelNeedleNode.setProperty('Demo.Fuel', calculateNeedlePosition(maxFuel, cycleTimeFuel, timeOffsetFuel)); batteryNeedleNode.setProperty('Demo.Battery', calculateNeedlePosition(maxBattery, cycleTimeBattery, timeOffsetBattery));
In the starting point project the state manager controls the turn indicators. The TurnIndicatorLeft and TurnIndicatorRight nodes each have the Turn Indicator property which the state manager uses to switch on or off each indicator.
In this section you use a JavaScript script to set the value of the Controller Property property that the state manager in the turn indicator nodes uses to control whether a turn indicator is switched on or off.
To make the turn indicators blink:
// Set the length of one blink.
var blinkTime = 2;
// Set how many times you want the turn indicator to blink.
var blinkCountOneIndicator = 5;
var blinkCountTwoIndiactors = blinkCountOneIndicator * 2;
var cycleTime = blinkTime * blinkCountTwoIndiactors;
var timeOffset = cycleTime / 2;
function calculateIndicatorState()
{
var halfCycleTime = cycleTime / 2;
var now = (Date.now() + timeOffset * 1000) / 1000;
var indicatorState = false;
if (now % cycleTime < halfCycleTime)
{
indicatorState = false;
}
else
{
var offTime = blinkTime / 2;
if (now % blinkTime < offTime)
{
indicatorState = false;
}
else
{
indicatorState = true;
}
}
return indicatorState;
}
// Set the Turn Indicator property of the node on which you execute this script.
node.setProperty('Demo.TurnIndicator', calculateIndicatorState());
Kanzi Studio stores the scripts you use in the project in the <ProjectName>/Scripts directory. You can open and edit the scripts in any text editor.
var timeOffset = cycleTime / 2;with
var timeOffset = 0;
In this section you use a script to get the current time from the target device and show it in the cluster.
To show the current time:
// Get the current time from the device.
var time = new Date();
// Show the preceding 0 when minutes are a single digit
var minutes = String(time.getMinutes()).length < 2 ? '0' + time.getMinutes() : time.getMinutes();
// Show the preceding 0 when seconds are a single digit
var seconds = String(time.getSeconds()).length < 2 ? '0' + time.getSeconds() : time.getSeconds();
// Set the Text property of the node on which you execute this script to show the current time in format H:MM:SS
node.setProperty('TextBlockConcept.Text', time.getHours() + ':' + minutes + ':' + seconds);